{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"购买服务",back:1} %}
    <div class="pad5 bdtso ">
        <div class="fs8 c12 padt5 padb5 bdbda">地址</div>
        <div class="flrc padt6 padb6 pos-r">
            <div class="wh10-10 flcc fs10 c12">
                <span class="fa fa-map-marker"></span>
            </div>
            <div class="flex1 lh15 fs8">
                <div>
                    [[isTrue(address.province)?address.province:"点击选择" ]]
                    [[isTrue(address.city)?address.city:"" ]]
                    [[isTrue(address.area)?address.area:"" ]]
                </div>
                <div>[[address.address]]</div>
            </div>
            <div class="c12">
                <mu-ripple @click="goto('myAddressSelect')"><span class="fa fa-angle-right"></span></mu-ripple>
            </div>
        </div>
    </div>
    <div class="pad5 bdtso bdw10 bdc13 pos-r">
        <div class="fs8 c12 padt5 padb5 bdbda">联系人</div>
        <div class="flrc padt6 padb6">
            <div class="wh10-10 flcc fs10 c12">
                <span class="fa fa-user-circle"></span>
            </div>
            <div class="flex1 flrc lh15 fs8">
                <div class="flex1">[[contact.name]]</div>
                <div>[[contact.phone]]</div>
            </div>
            <div class="c12 padl10">
                <mu-ripple @click="goto('myContactSelect')"><span class="fa fa-angle-right"></span></mu-ripple>
            </div>
        </div>
    </div>

    <div class="pad5 bdtso bdw10 bdc13 pos-r">
        <div class="fs8 c12 padt5 padb5 bdbda">预约时间</div>
        <div class="flrc padt6">
            <div class="wh10-10 flcc fs11 c12 padb8">
                <span class="fa fa-clock-o"></span>
            </div>
            <div class="flex1 tar lh15 fs8">
                <div>
                    <mu-date-input placeholder="点击选择日期时间" v-model="bookAt" container="bottomSheet" type="dateTime" view-type="list" full-width :min-date="new Date()"></mu-date-input>
                </div>
            </div>
            <div class="c12 padl10">
            </div>
        </div>
    </div>

    <div class="pad5 bdtso bdw10 bdc13 ">
        <div class="fs8 c12 padt5 padb5 bdbda">给商家留言</div>
        <div class="flex-r flex-start padt6 padb6">
            <div class="wh10-10 tac fs10 c12">
                <span class="fa fa-sticky-note-o padt2"></span>
            </div>
            <div class="flex1">
                <mu-text-field v-model="tips" multi-line :rows="4" placeholder="有什么要叮嘱商家的吗？" full-width></mu-text-field>
            </div>
        </div>
    </div>
    <div class="pad5 bdtso bdw10 bdc13 ">
        <div class="fs8 c12 padt5 padb5 bdbda">增加附件资料</div>
        <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2">
            <div id="box" class="scrollX-Box flex-start bcf pad5">
                <div class="s1 wh40-40 scrollX-Item marr5 pos-r" v-for="item,index in picsV">
                     <img @click="showPic(index,picsV)" :src="item" class="wh40-40 scrollX-Item" alt="" onerror="this.src=pic404">
                    <div class="pos-a r0 b0 flrc op9">
                        <mu-button fab small color="black" @click="move(index,-1)">
                            <mu-icon value="arrow_back"></mu-icon>
                        </mu-button>
                        <mu-button fab small color="black" @click="move(index,1)">
                            <mu-icon value="arrow_forward"></mu-icon>
                        </mu-button>
                        <mu-button fab small color="black" @click="del(index)">
                            <mu-icon value="close"></mu-icon>
                        </mu-button>
                    </div>
                </div>

                <div class=" s1 scrollX-Item marr5">
                    <div  @click="selectPic()" class="wh40-40 flcc bdso"> <img :src="picAdd" class="wh10-10 op3" alt="" onerror="this.src=pic404"></div>
                </div>
            </div>
        </div>

    </div>

    <div class="pad5 bdtso bdw10 bdc13 ">
        <div class="fs8 c11 fwb padt5 padb5 bdbda">注意事项</div>
        <div class="padt6 padb6 lh15 fs8 op7 c2">
            <div>警惕诈骗,收取押金的都是骗子；</div>
            <div>收取押金的都是骗子，警惕诈骗,收取押金的都是骗子；</div>
            <div>线下交易引起的纠纷与平台无关</div>
        </div>
    </div>



    <div class="bc13 c13 pad20">
        this is the end
    </div>
    <div class="pos-f b0 l0 r0 bcf flrc flex-fill bdtso">
        <div class="flex3 padl10 c1 fs12">
            ￥ [[product.price]]
        </div>
        <div class="flex1 bc2 c13 flcc pad8 pos-r">
            <mu-ripple @click="submit()">
                立即支付
            </mu-ripple>
        </div>
    </div>

{% endblock %}

{% block myJs %}
    <script src="{{ root }}/js/map.js{{ rnd }}"></script>

        <script src="{{ root }}/js/city.js{{ rnd }}"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/crypto/crypto.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/hmac/hmac.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/sha1/sha1.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/base64.js"></script>
        {#<script type="text/javascript" src="{{ root }}/assets/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>#}
        <script type="text/javascript" src="{{ root }}/assets/oss/uploadMy.js{{ rnd }}"></script>

{% endblock %}
